<template>
  <div>
    <baseContainer title="表单验证+自定义验证规则">
    <x-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" >
      <x-form-item label="Activity names" required>
        <x-row>
          <x-col :span="11">
            <x-form-item prop="name">
              <x-input v-model="name"/>
            </x-form-item>
          </x-col>
          <x-col :span="2"> - </x-col>
          <x-col :span="11">
            <x-form-item prop="delivery">
              <x-input v-model="delivery"/>
            </x-form-item>
          </x-col>
        </x-row>
      </x-form-item>
      <x-form-item label="Activity name" prop="region">
        <x-select v-model="region"></x-select>
      </x-form-item>
      <x-form-item label="Activity name" prop="count">
        <x-select v-model="count"></x-select>
      </x-form-item>
      <x-form-item label="Activity name" prop="date1">
        <x-date-picker v-model="date1"></x-date-picker>
      </x-form-item>
      <x-form-item label="Activity name" prop="date2">
        <x-select v-model="date2">
          <x-option :label="'labels'" :value="123"></x-option>
        </x-select>
      </x-form-item>
      <x-form-item label="Activity type" prop="type">
      <x-check-box-group v-model="ruleForm.type">
        <x-chec-kbox label="Online activities" name="type" />
        <x-check-box label="Promotion activities" name="type" />
        <x-check-box label="Offline activities" name="type" />
        <x-check-box label="Simple brand exposure" name="type" />
      </x-check-box-group>
    </x-form-item>
      <x-form-item>
        <x-button @click="submitForm(ruleFormRef)" type="primary">提交</x-button>
        <x-button @click="resetForm(ruleFormRef)" type="primary">Reset</x-button>
      </x-form-item>
    </x-form>
  </baseContainer>
  此部分未完成待更新
    <formAddRemove></formAddRemove>
  </div>
</template>

<script setup lang="ts">
import formAddRemove from './formAddRemove.vue'
import { reactive,toRefs,ref } from 'vue';
import baseContainer from './baseContainer.vue'
const ruleFormRef = ref()
const ruleForm = reactive({
         name: 'Hello',
         region: '',
         count: '',
         date1: '',
         date2: '',
         delivery: false,
         type: [],
         resource: '',
         desc: '',
})
const { name, region, count, date1, date2, delivery, type, resource, desc } = toRefs(ruleForm)
const validatorFun = (rule: any, value: any, callback: any) => { 
  console.log(rule, 'rule', value, 'value', callback, 'callback');
  callback(new Error('验证失败'))
}
const rules = reactive({
  name: [
    { required: true, message: 'name 为必填', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    { pattern: /^1[34578]\d{9}$/, message: 'name 不符合验证规则', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'region 必填',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      validator: validatorFun,
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
  delivery: [
    {
      required: true,
      // type:'Boolean',
      message: 'delivery 必须是布尔值',
      trigger: 'change',
    },
  ],
})

const submitForm = (formX) => { 
  formX.validate((valid, fields) => { 
    if (valid) { 
      console.log('获取数据');
    } else { 
      console.log('submit error',fields,valid);
    }
  })
}
const resetForm = (formX) => { 
  formX.resetFields()
}

</script>

<style scoped>

</style>